.unit-container {
  margin: 40px;
  position: relative;
  width: 64px;
  height: 64px;
  background-color: rgb(255, 255, 255);

  .unit-bg {
    position: relative;
    width: 100%;
    height: 100%;

    .unit-bg-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .unit-bg-image-animation-scale {
      animation: unit-bg-image-scale 1.28s linear;
    }

    &.unit-bg-animation-rotate {
      animation: dom-rotate360 1.28s linear;
    }
  }

  .unit-bar-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;

    &.unit-bar-all-animation-scale {
      animation: unit-bg-image-scale 1.28s linear;
    }

    .shake-container {
      width: 46px;
      height: 46px;
    }

    .unit-bar-all {
      position: absolute;
      top: 9px;
      left: 9px;
      width: 46px;
      height: 46px;
      transition: transform 1.28s linear;
    }

    .unit-bar {
      width: 46px;
      height: 46px;
      transition: transform 1.28s linear;
    }

    // 抖动动画
    .shake-animation {
      animation: shake-animation 0.8s linear;
    }
  }

  .unit-wave-container {
    position: absolute;
    top: 9px;
    left: 9px;
    width: 46px;
    height: 46px;
    overflow: hidden;
    border-radius: 50%;
    z-index: 0;

    &.unit-wave-container-animation {
      animation: wave-animation-scale 3.04s linear;
    }

    .unit-wave {
      position: absolute;
      left: -10px;
      top: 40px;
      width: 100%;
      height: 100%;
      z-index: 100;
      transform: scale(0.8);
    }

    .wave-animation {
      animation: wave-animation 3.04s linear;
    }
  }

  .unit-box,
  .real-unit {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 48px;
    height: 48px;
    overflow: hidden;
    z-index: 3;
    font-weight: 500;
    font-size: 16px;
    color: #fff;
  }

  .real-unit {
    color: #2283e2;

    &.real-unit-color-animation {
      animation: real-unit-color-animation 2.08s linear;
    }
  }

  .unit,
  .unit1,
  .unit2,
  .unit3,
  .unit4 {
    position: absolute;
    width: 16px;
    height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
  }

  .unit {
    top: 16px;
    right: 8px;
  }

  .unit1,
  .unit2,
  .unit3,
  .unit4 {
    left: 8px;
  }

  .unit1 {
    top: 0px;
    opacity: 0;
  }

  .unit2 {
    top: 0px;
    opacity: 0;
  }

  .unit3 {
    top: 0px;
  }

  .unit4 {
    top: 16px;
  }

  .unit-annimation {
    animation: unit-annimation 3.04s linear;
  }

  .unit1-animation {
    animation: unit1-animation 3.04s linear;
  }

  .unit2-animation {
    animation: unit2-animation 3.04s linear;
  }

  .unit3-animation {
    animation: unit3-animation 3.04s linear;
  }

  .unit4-animation {
    animation: unit4-animation 3.04s linear;
  }
}

.opacity0 {
  opacity: 0;
}

@keyframes dom-rotate360 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 1280ms */
@keyframes unit-bg-image-scale {
  0% {
    transform: scale(1);
  }

  /* 680ms */
  53.13% {
    transform: scale(1);
  }

  /* 840ms */
  65.63% {
    transform: scale(1.1);
  }

  /* 1000ms */
  78.13% {
    transform: scale(0.9);
  }

  /* 1160ms */
  90.63% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

/* 3040ms */
// 第680毫秒：100%；第840毫秒:110%；第1000毫秒:90%；第1160毫秒:105%；第1320毫秒:100%
@keyframes wave-animation-scale {
  0% {
    transform: scale(1);
  }
  /* 680ms */
  22.37% {
    transform: scale(1);
  }

  /* 840ms */
  27.63% {
    transform: scale(1.1);
  }

  /* 1000ms */
  32.89% {
    transform: scale(0.9);
  }
  /* 1160ms */
  38.16% {
    transform: scale(1.05);
  }
  /* 1320ms */
  43.42% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

// 3040
// 从第0毫秒到第800毫秒：位置上移42；
// 从第1960毫秒到第2360毫秒：位置下移42；
@keyframes wave-animation {
  0% {
    top: 42px;
    transform: scale(1);
  }
  /* 680ms */
  22.37% {
    transform: scale(1);
  }

  /* 800*/
  26.31% {
    top: -4px;
  }

  /* 840ms */
  27.63% {
    transform: scale(1.1);
  }

  /* 1000ms */
  32.89% {
    transform: scale(0.9);
  }
  /* 1160ms */
  38.16% {
    transform: scale(1.05);
  }
  /* 1320ms */
  43.42% {
    transform: scale(1);
  }
  /*1960*/
  64.47% {
    top: -4px;
  }

  /*2360*/
  77.63% {
    top: 42px;
  }
  100% {
    transform: scale(1);
  }
}

/**3040ms
*从1120毫秒到第1280毫秒--不透明度100%到0%，位置向下移动18
*/

/**
“左”或“右”或“上”“下”
第960毫秒：不透明度0%
第1120毫秒：不透明度100%
**/
@keyframes unit4-animation {
  0% {
    opacity: 0;
    top: 16px;
  }

  // 960
  31.58% {
    opacity: 0;
    top: 16px;
  }

  // 1120
  36.84% {
    opacity: 1;
    top: 16px;
  }
  // 1280
  42.1% {
    opacity: 0;
    top: 32px;
  }
  100% {
    opacity: 0;
    top: 32px;
  }
}

/* 3040ms
*从1120毫秒到第1280毫秒--不透明度0%到100%，位置向下移动18（到坐标位置）
*从第1280毫秒到1440毫秒--不透明度100%到0%，位置向下移动18；
*/
@keyframes unit3-animation {
  0% {
    top: 0px;
    opacity: 0;
  }
  // 1120
  36.84% {
    top: 0px;
    opacity: 0;
  }

  // 1280
  42.1% {
    top: 16px;
    opacity: 1;
  }
  // 1440
  47.37% {
    opacity: 0;
    top: 32px;
  }

  100% {
    opacity: 0;
    top: 32px;
  }
}

/**
* 3040ms
* 坐标16px
*从第1280毫秒到1440毫秒--不透明度0%到100%，位置向下移动18（到坐标位置）；
*从第1440毫秒到1600毫秒--不透明度100%到0%，位置向下移动18；
**/
@keyframes unit2-animation {
  0% {
    top: 0px;
    opacity: 0;
  }

  // 1280
  42.1% {
    top: 0px;
    opacity: 0;
  }

  // 1440
  47.37% {
    top: 16px;
    opacity: 1;
  }

  // 1600
  52.63% {
    opacity: 0;
    top: 32px;
  }
  100% {
    opacity: 0;
    top: 32px;
  }
}

/**
*3040
* 从第1440毫秒到1600毫秒--不透明度0%到100%，位置向下移动20（即，到坐标位置再向下2）；
* 到1720毫秒，位置上移3；
* 到1840毫秒，位置下移1（到坐标位置） 
**/
@keyframes unit1-animation {
  0% {
    top: 0px;
    opacity: 0;
  }
  // 1440
  47.37% {
    top: 0px;
    opacity: 0;
  }

  // 1600
  52.63% {
    opacity: 1;
    // 16+2
    top: 18px;
  }

  // 1720
  56.58% {
    // 上移3
    top: 13px;
    opacity: 1;
  }

  // 1840
  60.53%,
  100% {
    opacity: 1;
    top: 16px;
  }
}

/* 2080ms */
// 从第1960毫秒到2080毫秒--白色字由不透明度100%到0%；蓝色字由不透明度0%到100%；
@keyframes real-unit-color-animation {
  0% {
    opacity: 0;
  }
  // 1960
  94.23% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

// 3040
// 第960毫秒：不透明度0%
// 第1120毫秒：不透明度100%
@keyframes unit-annimation {
  0% {
    opacity: 0;
  }

  // 960
  31.58% {
    opacity: 0;
  }
  // 1120--稍微延迟一点
  38.84% {
    opacity: 1;
  }

  // 1120
  38.89% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

/*
动画是2240开始的
800ms
第2240毫秒：0
第2400毫秒:+15
第2560毫秒:-12
第2720毫秒:+8
第2880毫秒:-6
第3040毫秒:0
*/
@keyframes shake-animation {
  // 0
  0% {
    transform: rotate(0deg);
  }

  // 160ms
  20% {
    transform: rotate(15deg);
  }

  // 320ms
  40% {
    transform: rotate(-12deg);
  }

  // 480ms
  60% {
    transform: rotate(8deg);
  }

  // 640ms
  80% {
    transform: rotate(-6deg);
  }

  // 800ms
  100% {
    transform: rotate(0deg);
  }
}
